<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>入党申请书列表</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="kitten">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
		<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
		<link href="js/lib/layui/css/layui.css" rel="stylesheet">

	</head>

	<body>
		<div class="container-fluid p-t-15" id="content-page">

			<div class="row" style="padding-bottom:15px;">

				<div class="col-md-2">
					<input placeholder="申请人" id="scenicName" v-model="selectInfo.name" class="form-control"
						autocomplete="off" />
				</div>
				<div class="col-md-4">
					<button type="button" class="btn btn-default" @click="search">搜索</button>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-body">

							<div class="table-responsive">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>ID</th>
											<th>申请人姓名</th>
											<th>性别</th>
											<th>出生日期</th>
											<th>联系电话</th>
											<th>民族</th>
											<th>学历</th>
											<th>申请日期</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(item,index) in serverList">
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.gender}}</td>
											<td>{{item.birthdate}}</td>
											<td>{{item.phoneNum}}</td>
											<td>{{item.nation}}</td>
											<td>{{item.eduLevel}}</td>
											<td>{{item.createTime|dateFormat}}</td>
											<td>
												<button class="btn btn-primary" type="button"
													@click="edit(item)">详情</button>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div id="pages1"></div>
						</div>
					</div>
				</div>
			</div>



		</div>



		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="js/jconfirm/jquery-confirm.min.js"></script>
		<script type="text/javascript" src="js/lib/layui/layui.js"></script>
		<script>
			//轻量级框架
			var dataInfo = new Vue({
				el: "#content-page",
				//Vue的数据对象
				data: {
					serverList: [], //数据列表
					info: {}, //对象
					scenicTypeList: [], //旅游路线类型
					selectInfo: {}
				}, //数据对象结束
				//方法
				methods: {
					GetAll: function(pageNum, pageSize) {
						var me = this;
						$.ajax({
							url: "http://127.0.0.1:8081/party/application/selectPage?pageNum=" + pageNum +
								"&pageSize=" +
								pageSize,
							async: false,
							type: "POST",
							contentType: 'application/json',
							dataType: 'json',
							data: JSON.stringify(me.selectInfo),
							success: function(json) {
								me.serverList = json.page.records;
							}
						});

					},
					//点击搜索
					search() {
						this.GetAll(0, 10);
						this.selectCount();
					},
					selectCount: function() {
						var vms = this;
						$.ajax({
							type: "POST",
							url: "http://127.0.0.1:8081/party/application/selectCount",
							contentType: "application/json",
							data: JSON.stringify(vms.selectInfo),
							dataType: "json",
							success: function(json) {
								layui.use(['laypage', 'layer'], function() {
									var laypage = layui.laypage,
										layer = layui.layer;
									//总页数大于页码总数
									laypage.render({
										elem: 'pages1',
										count: json.count,
										layout: ['count', 'prev', 'next', 'limit',
											'skip'
										],
										jump: function(obj) {
											vms.GetAll(obj.curr - 1, obj
												.limit);
										}
									});
								})
							}
						});

					},
					//点击详情
					edit(item) {
						let vm = this;
						window.location.href = 'editApp.html?id=' + item.id;
					},

				}, //方法结束
				created: function() {
					var vm = this;
					vm.GetAll(0, 10);
					vm.selectCount();
				}, //初始加载方法结束
				filters: {
					dateFormat: function(dateStr, pattern = '') {
						var dt = new Date(dateStr)
						// yyyy-mm-dd
						var y = dt.getFullYear()
						var m = (dt.getMonth() + 1).toString().padStart(2, '0')
						var d = dt.getDate().toString().padStart(2, '0')

						if (pattern.toLowerCase() === 'yyyy-mm-dd') {
							return `${y}-${m}-${d}`
						} else {
							var hh = dt.getHours()
							var mm = dt.getMinutes().toString().padStart(2, '0')
							var ss = dt.getSeconds().toString().padStart(2, '0')
							return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
						}
					}

				}
			}); //vue结束
		</script>
	</body>
</html>